<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://" + request.getServerName() + ":" 
	+ request.getServerPort() + path + "/";
%>
<html>
<head>
<base href="<%=basePath%>"/> <!-- 设置页面的基本路径，页面所有资源引入和页面跳转都济源bathPath -->

<link rel="stylesheet" type="text/css" href="lib/zTree/v3/css/zTreeStyle/zTreeStyle.css" />
<script type="text/javascript" src="lib/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript" src="lib/zTree/v3/js/jquery.ztree.all-3.5.min.js"></script>
<script type="text/javascript">
	/* zTree的设置对象 */
	var setting = {
		data:{
			/* 设置支持简单json格式数据 */
			simpleData:{
				enable:true,
				idKey: "permissionId",  /* zTree数据的id名称 */
				pIdKey: "parentId"  /* zTree数据的父id名称 */
			}
		},
		/* 设置是否支持复选框 */
		check: {
			enable: true
		},
		/* 异步加载数据 */
		async: {
			enable: true,
			url: "permission/getAllPermission.do",
			/* 预处理zTree数据 */
			dataFilter: ajaxDataFilter
		}
	}
	
	/* 预处理zTree数据的函数 */
	/*
	 * treeId: 对应zTree的id
	 * parentNode: 进行异步加载的父节点 JSON 数据对象
	 * responseData: 异步加载获取到的数据转换后的 Array(JSON) / JSON / String 数据对象
	 */
	function ajaxDataFilter(treeId, parentNode, responseData) {
		if (responseData) {
			for (var i = 0; i < responseData.length; i++) {
				/* 给每个节点数据添加一个open:true属性，达到将所有数据展开的效果 */
				responseData[i].open = true;  
			}
		}
		console.log(responseData);  //打印调试
		return responseData;
	};

	/* 初始化zTree */
	$(function() {
		$.fn.zTree.init($("#permissionTree"), setting);
	});
</script>

<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<ul id="permissionTree" class="ztree"></ul>
</body>
</html>